<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Kepler's dilemma</title>
      <link rel="stylesheet" href="../css/main.css"/>
      <style>
         img
         {
            position: absolute;
         }

         img[alt="moon"]
         {
            top: 0;
            left: 0;
         }

         img[alt="earth"]
         {
            top: 128px;
            left: 128px;
         }

         .box-animation
         {
            position: relative;
         }

         button
         {
            display: block;
            margin: auto;
         }
      </style>
   </head>
   <body>
      <p>The output is partially printed on the console</p>
      <button id="button-animate">Animate</button>

      <div class="box-animation">
         <img src="images/moon.png" alt="moon"/>
         <img src="images/earth.png" alt="earth"/>
      </div>

      <script src="../js/jquery-1.11.3.min.js"></script>
      <script>
         function formatDate(date) {
            return (date.getHours() < 10 ? '0' : '') + date.getHours() +
                    ':' + (date.getMinutes() < 10 ? '0' : '') + date.getMinutes() +
                    ':' + (date.getSeconds() < 10 ? '0' : '') + date.getSeconds() +
                    '.' + (date.getMilliseconds() < 10 ? '00' : (date.getMilliseconds() < 100 ? '0' : '')) +
                    date.getMilliseconds();
         }

         $('#button-animate').click(function() {
            var $moonImage = $('img[alt="moon"]');
            console.log('At ' + formatDate(new Date()) + ' 1');

            $moonImage.animate({left: '+=256'}, 2500);
            console.log('At ' + formatDate(new Date()) + ' 2');

            $moonImage.animate({top: '+=256'}, 2500);
            console.log('At ' + formatDate(new Date()) + ' 3');

            $moonImage.animate({left: '-=256'}, 2500);
            console.log('At ' + formatDate(new Date()) + ' 4');

            $moonImage.animate({top: '-=256'}, 2500);
            console.log('At ' + formatDate(new Date()) + ' 5');
         });

         /* callback alternative
         var $moonImage = $('img[alt="moon"]');
         $('#button-animate').click(function() {
            $moonImage.animate({left: '+=256'}, 2500, function(){
               $moonImage.animate({top: '+=256'}, 2500, function(){
                  $moonImage.animate({left: '-=256'}, 2500, function(){
                     $moonImage.animate({top: '-=256'}, 2500);
                  });
               });
            });
         });
         */
      </script>
   </body>
</html>